<template>
  <Form
    ref="searchForm"
    :model="searchForm"
    :rules="rules"
    :label-width="labelWidth" 
    label-position="right"
  >
    <Row :gutter="24" type="flex" justify="start">
      <i-col v-bind="grid">
        <FormItem label="手机号:" prop="phone" label-for="phone">
          <Input v-model="searchForm.phone" placeholder="请输入手机号" element-id="phone" @on-enter="handleSubmit" clearable />
        </FormItem>
      </i-col>
      <i-col v-bind="grid">
        <FormItem label="用户邮箱:" prop="email" label-for="email">
          <Input v-model="searchForm.email" placeholder="请输入用户邮箱" element-id="email" @on-enter="handleSubmit" clearable />
        </FormItem>
      </i-col>
      <template v-if="collapse">
        
      </template>
      <i-col v-bind="grid" class="ivu-quick-opt">
          <Button type="primary" @click="handleSubmit">查询</Button>
          <Button class="ivu-ml-8" @click="handleReset">重置</Button>
          <a class="ivu-ml-8" @click="collapse = !collapse">
            <template v-if="!collapse">
              展开
              <Icon type="ios-arrow-down" />
            </template>
            <template v-else>
              收起
              <Icon type="ios-arrow-up" />
            </template>
          </a>
      </i-col>
    </Row>
  </Form>
</template>
<script>
export default {
  name: 'UserSearchQuick',
  data() {
    return {
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 24
      },
      labelWidth: 120,
      collapse: false,
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: null,
        sortOrder: null,
        id: null,
        idMin: null,
        idMax: null,
        phone: null,
        email: null,
        password: null,
        salt: null,
        version: null,
        versionMin: null,
        versionMax: null,
        createTime: null,
        createTimeMin: null,
        createTimeMax: null,
        updateTime: null,
        updateTimeMin: null,
        updateTimeMax: null,
        isActive: null,
        isActiveMin: null,
        isActiveMax: null
      },
      rules: {}
    }
  },
  computed: {
  },
  methods: {
    handleSubmit() {
      this.$emit('searchData', this.searchForm)
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNo = 1
      this.searchForm.pageSize = 10
      this.handleSubmit()
    }
  }
}
</script>
<style>
.ivu-quick-opt {
  text-align: right;
}
.ivu-ml-8{
  margin-left:8px!important
}
</style>